<!--
  - # 此文件版权属于ASO.DESIGN
  - # 文件：menu.vue  项目：aso-zero
  - # 作用：
  - # 当前修改时间：2021年07月18日 01:05:05
  - # 上次修改时间：2021年07月18日 00:29:53
  - # 作者：thunur
  - # 此文件不可非法传播、倒卖、共享，否则我们将追究相应的法律责任。
  - # 您如果已获得ASO.DESIGN授权可在原有基础上进行修改使用
  - # 如果您还没获得授权请联系我们 thunur@qq.com
  - # Copyright (c) 2021 aso.design
  -->

<template>
	<!--	<cl-scrollbar class="container">-->
	<div class="container">
		<div class="title">微信自定义菜单</div>
		<div class="container-menu__area">
			<div class="container-menu__area__title">公众号名称</div>
			<div class="container-menu__area__nav">
				<ul class="container-menu__area__nav__list">
					<li
						v-for="(item, index) in menu"
						class="container-menu__area__nav__list__li"
						:class="['container-menu__area__nav__list__li__' + menu.length]"
						:key="index"
					>
						<a
							href="javascript:void(0);"
							@click="activeSelected(index)"
							class="container-menu__area__nav__list__li__a"
							:class="{ active: index === selected }"
						>
							{{ item.name }}
						</a>
						<div
							class="container-menu__area__nav__list__li__submenu"
							:class="{ show: index === selected }"
						>
							<ul class="container-menu__area__nav__list__li__submenu__ul">
								<li
									v-for="(value, key) in item.sub_button"
									class="container-menu__area__nav__list__li__submenu__ul__li"
									:class="{ current: key === selectedTwo }"
									:key="key"
								>
									<a href="javascript:void(0);" @click="currentSelected(key)">
										<span>{{ value.name }}</span>
									</a>
								</li>
								<!-- 子菜单 -->
								<li
									class="container-menu__area__nav__list__li__submenu__ul__li container-menu__area__nav__list__li__submenu__add"
									:style="item.sub_button.length === 5 ? 'display:none' : ''"
								>
									<a
										href="javascript:void(0);"
										@click="twoLevelMenuAdd"
										title="最多添加5个子菜单"
									>
										<span><i class="el-icon-plus"></i></span>
									</a>
								</li>
							</ul>
							<i
								class="container-menu__area__nav__list__li__submenu__arrow container-menu__area__nav__list__li__submenu__arrow_out"
							></i>
							<i
								class="container-menu__area__nav__list__li__submenu__arrow container-menu__area__nav__list__li__submenu__arrow_in"
							></i>
						</div>
					</li>
					<!-- 一级菜单添加 -->
					<li
						class="container-menu__area__nav__list__li__add container-menu__area__nav__list__li"
						:class="[
							'container-menu__area__nav__list__li__' +
								(menu.length > 0 ? menu.length : '')
						]"
					>
						<a
							href="javascript:void(0);"
							@click="oneLevelMenuAdd"
							:class="[
								menu.length === 0
									? 'container-menu__area__nav__list__li__pre_add'
									: ''
							]"
							title="最多添加3个一级菜单"
						>
							<i class="el-icon-plus"></i>
							<span v-if="menu.length === 0">菜单名称</span>
						</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="container-menu__edit">
			<i class="triangle"></i>
			<div
				class="container-menu__edit__tips"
				v-if="!menuObject || selected === -1"
			>
				<div class="container-menu__edit__tips__box">点击左侧菜单进行编辑操作</div>
			</div>
			<div class="container-menu__edit__area" v-else>
				<div class="container-menu__edit__area__title">
					<div class="container-menu__edit__area__title__area" v-if="doseSub">
						<el-button slot="reference" type="warning" size="mini" @click="deleteMenu">
							删除
						</el-button>
					</div>
					<div class="container-menu__edit__area__title__area" v-else>
						<el-popover placement="top" width="160" v-model="delTips">
							<p>继续将会清空子菜单数据！</p>
							<div style="text-align: right; margin: 0">
								<el-button size="mini" type="text" @click="delTips = false">
									取消
								</el-button>
								<el-button type="primary" size="mini" @click="deleteMenu">
									继续
								</el-button>
							</div>
							<el-button slot="reference" type="danger" size="mini">
								删除
							</el-button>
						</el-popover>
					</div>
					<span>{{ menuObject.name }}</span>
				</div>
				<el-form ref="ruleForm" :model="menuObject" :rules="rules" label-width="80px">
					<el-form-item
						class="item"
						label="菜单名称"
						prop="name"
						style="margin-top: 10px"
					>
						<el-input v-model="menuObject.name" size="medium" />
					</el-form-item>
					<div v-if="doseSub">
						<el-form-item
							class="item"
							label="菜单内容"
							style="margin-bottom:0"
							prop="type"
						>
							<el-radio-group v-model="menuObject.type">
								<el-radio label="click">发送消息</el-radio>
								<el-radio label="view">跳转网页</el-radio>
								<el-radio label="miniprogram">
									跳转小程序
								</el-radio>
							</el-radio-group>
						</el-form-item>
						<!-- 发送消息 -->
						<el-tabs
							type="border-card"
							v-model="menuObject.msgType"
							v-if="menuObject.type === 'click'"
							v-loading="loadData"
							@tab-click="handleClick"
						>
							<el-tab-pane name="picmsg">
								<span slot="label"> <i class="el-icon-files"></i> 图文消息</span>
								<div
									class="container-menu__edit__picmsg__area"
									v-if="menuObject.media_id > 0"
								>
									<div class="container-menu__edit__picmsg__area__list">
										<div
											class="container-menu__edit__picmsg__area__list__item"
											v-for="(item, index) in menuObject.media"
											:key="index"
											:class="{ 'has-thumb': index === 0 }"
										>
											<div class="bd">
												<div class="title">
													{{ item.title }}
												</div>
											</div>
											<div class="hd">
												<div class="thumb">
													<el-image
														fit="cover"
														:src="item.cover"
													></el-image>
												</div>
											</div>
										</div>
									</div>
									<a
										href="javascript:"
										@click="deletePicmsg"
										class="container-menu__edit__picmsg__area__delete"
									>
										删除
									</a>
								</div>
								<el-row v-else>
									<el-col :span="4">
										<cl-material-space @confirm="onPicMsgConfirm" />
									</el-col>
									<el-col :span="4">
										<cl-graphic-editing />
									</el-col>
								</el-row>
							</el-tab-pane>
							<el-tab-pane name="text">
								<span slot="label"
									><i class="el-icon-chat-dot-square"></i> 文字</span
								>
								<el-input
									type="textarea"
									:rows="4"
									placeholder="请输入文字消息"
									v-model="menuObject.text"
								>
								</el-input>
							</el-tab-pane>
							<!--<el-tab-pane name="pic">
								<span slot="label"
									><i class="el-icon-chat-dot-square" /> 图片</span
								>
								<div
									class="container-menu__edit__pic"
									v-if="menuObject.pic"
								>
									<div class="container-menu__edit__pic__area">
										<el-image fit="cover" :src="menuObject.pic" lazy />
									</div>
									<a
										href="javascript:"
										@click="deletePic"
										class="container-menu__edit__pic__delete"
										><svg
											width="17"
											height="13"
											viewBox="0 0 17 13"
											xmlns="http://www.w3.org/2000/svg"
										>
											<path
												d="M4.05 11H16a1 1 0 0 0 0-2H4.015l-.017-.988a.5.5 0 0 0-.811-.383L.565 9.711a.5.5 0 0 0 .014.793l2.693 1.989a.5.5 0 0 0 .797-.411L4.049 11zm9.02-9H2a1 1 0 1 0 0 2h11.035l-.017 1.002a.5.5 0 0 0 .794.413l2.684-1.953a.5.5 0 0 0 .014-.798L13.895.618a.5.5 0 0 0-.808.386L13.07 2z"
											></path>
										</svg>
										删除
									</a>
								</div>
								<el-row :gutter="20" v-else>
									<el-col :span="6">
										<cl-upload-space
											:showMaterial="true"
											:limit="1"
											:rename="true"
											:detail-data="true"
											@confirm="onFileConfirm"
										/>
									</el-col>
								</el-row>
							</el-tab-pane>-->
							<!--<el-tab-pane name="audio">
								<span slot="label"><i class="el-icon-microphone" /> 语音</span>
								<el-row :gutter="20">
									<el-col :span="6">
										<cl-upload-space
											:showMaterial="true"
											:limit="1"
											:rename="true"
											@confirm="onFileConfirm"
										/>
									</el-col>
								</el-row>
							</el-tab-pane>
							<el-tab-pane name="video">
								<span slot="label"
									><i class="el-icon-video-camera" /> 视频</span
								>
								<el-row :gutter="20">
									<el-col :span="6">
										<cl-upload-space
											:showMaterial="true"
											:limit="1"
											:rename="true"
											@confirm="onFileConfirm"
										/>
									</el-col>
								</el-row>
							</el-tab-pane>-->
						</el-tabs>
						<!-- 发送网页 -->
						<div
							class="container-menu__edit__area__url"
							v-if="menuObject.type === 'view'"
						>
							<div class="container-menu__edit__area__url__area">
								<p class="container-menu__edit__area__url__area__tips">
									订阅者点击该子菜单会跳到以下链接
								</p>
								<el-form-item
									prop="url"
									label="页面地址"
									size="medium"
									:rules="[
										{
											required: true,
											message: '请输入页面地址',
											trigger: 'blur'
										},
										{
											type: 'url',
											message: '请输入正确的页面地址',
											trigger: ['blur', 'change']
										}
									]"
								>
									<el-input v-model="menuObject.url"></el-input>
								</el-form-item>
							</div>
						</div>
						<!-- 发送小程序 -->
						<div
							class="container-menu__edit__area__weapp"
							v-if="menuObject.type === 'miniprogram'"
						>
							<div class="container-menu__edit__area__weapp__area">
								<p class="container-menu__edit__area__weapp__area__tips">
									订阅者点击该子菜单会跳到以下小程序
								</p>
								<el-form-item
									prop="app_id"
									label="APPID"
									size="medium"
									:rules="[
										{
											required: true,
											message: '请输入APPID',
											trigger: 'blur'
										}
									]"
								>
									<el-input v-model="menuObject.app_id"></el-input>
								</el-form-item>
								<el-form-item
									prop="page_path"
									label="页面路径"
									size="medium"
									:rules="[
										{
											required: true,
											message: '请输入页面路径',
											trigger: 'blur'
										}
									]"
								>
									<el-input v-model="menuObject.page_path"></el-input>
								</el-form-item>
								<el-form-item
									prop="url"
									label="备用地址"
									size="medium"
									:rules="[
										{
											required: true,
											message: '请输入备用地址',
											trigger: 'blur'
										},
										{
											type: 'url',
											message: '备用地址只支持网址',
											trigger: ['blur', 'change']
										}
									]"
								>
									<el-input v-model="menuObject.url"></el-input>
								</el-form-item>
							</div>
						</div>
					</div>
				</el-form>
			</div>
		</div>
		<div class="container__toolbar">
			<el-button type="primary" size="medium" :loading="loading" @click="submit">
				保存并发布到微信
			</el-button>
		</div>
	</div>
	<!--	</cl-scrollbar>-->
</template>
<script>
export default {
	name: "menuSetting",
	data() {
		return {
			loading: false,
			loadData: false,
			doseSub: true,
			isSub: false,
			// 图文是否已选择
			picMsgSelect: false,
			delTips: false,
			menu: [],
			selected: -1,
			selectedTwo: -1,
			count: 0,
			menuObject: {},
			rules: {
				name: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
				type: [{ required: true, message: "请选择菜单类型", trigger: "change" }]
			}
		};
	},
	mounted() {
		this.onload();
	},
	methods: {
		onload() {
			this.$service.wechat.menu.list().then(res => {
				this.menu = res;
				this.count = res.length;
			});
		},
		// 点击选项卡事件
		handleClick(tab) {
			this.menuObject.msgType = tab.name;
		},
		deleteMenu() {
			if (this.isSub) {
				this.menu[this.selected].sub_button.splice(this.selectedTwo, 1);
			} else {
				this.menu.splice(this.selected, 1);
				this.menuObject = {};
			}
			this.count--;
			this.delTips = false;
		},
		// 一级菜单点击
		activeSelected(index) {
			this.selected = index;
			if (this.selected === index) this.menuObject = this.menu[index];
			this.selectedTwo = null;
			this.doseSub = true;
			// 如果下级有子菜单那么设置为false，即不能编辑主菜单内容
			if (this.menu[index].sub_button.length > 0) {
				this.doseSub = false;
			}
			this.isSub = false;
			this.menuObject = this.menu[index];
			// 获取当前菜单配置的信息
			if (this.menuObject.media_id > 0 && this.doseSub) {
				this.onPicMsgConfirm(this.menuObject.media_id);
			}
		},
		// 点击二级菜单
		currentSelected(key) {
			this.selectedTwo = key;
			this.doseSub = true;
			this.isSub = true;
			this.menuObject = this.menu[this.selected].sub_button[key];
			if (this.menuObject.media_id > 0) {
				this.onPicMsgConfirm(this.menuObject.media_id);
			}
		},
		// 1级菜单添加
		oneLevelMenuAdd() {
			this.count++;
			let levelOneMenu = {
				// id: this.count,
				name: "菜单名称",
				type: "click",
				msgType: "picmsg",
				text: "",
				url: "",
				app_id: "",
				page_path: "",
				media_id: 0,
				media: [],
				sub_button: []
			};

			// 判断是否从0开始
			if (this.menu.length !== 0) {
				++this.selected;
			}
			this.isSub = false;
			this.menu.push(levelOneMenu);
			// this.activeSelected(this.selected);
		},
		// 二级菜单添加
		twoLevelMenuAdd() {
			this.count++;
			let levelTwoMenu = {
				// id: this.count,
				// pid: this.selected,
				name: "子菜单",
				type: "click",
				msgType: "picmsg",
				url: "",
				app_id: "",
				page_path: "",
				media_id: 0,
				media: [],
				text: ""
			};
			this.isSub = true;
			this.menu[this.selected].sub_button.push(levelTwoMenu);
			this.menuObject = levelTwoMenu;
		},

		// 选择图文回调
		onPicMsgConfirm(id) {
			this.loadData = true;
			this.menuObject.media_id = 0;
			this.menuObject.media = [];
			this.$service.wechat.material
				.list({ id })
				.then(res => {
					this.menuObject.media = res;
					this.picMsgSelect = true;
					this.menuObject.media_id = id;
				})
				.catch(err => {
					this.$message.error(err);
				});
			this.loadData = false;
		},
		// 选择文件、图片、音频、视频回调
		onFileConfirm(val) {
			this.menuObject.pic = val[0].url;
		},
		deletePicmsg() {
			this.menuObject.media_id = 0;
			this.menuObject.media = [];
			this.picMsgSelect = false;
		},
		// 删除图片消息
		deletePic() {
			this.menuObject.pic = "";
		},
		submit() {
			this.loading = true;
			this.$service.wechat.menu
				.add({
					data: this.menu
				})
				.then(() => {
					this.$message.success("保存成功");
					this.onload();
					this.loading = false;
				})
				.catch(err => this.$message.error(err));
			this.loading = false;
		}
	}
};
</script>
<style lang="scss" scoped>
.container {
	// 菜单区域
	&-menu__area {
		position: absolute;
		width: 294px;
		height: 480px;
		border: 1px solid #e7e7eb;
		background-image: url();
		background-repeat: no-repeat;
		background-position: 0 0;
		-webkit-background-size: contain;
		background-size: contain;

		&__title {
			color: $color-white;
			text-align: center;
			padding-top: 30px;
			font-size: 15px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			word-wrap: normal;
			margin-left: 30px;
			margin-right: 30px;
		}

		&__nav {
			&__list {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				background-image: url();
				background-repeat: no-repeat;
				background-position: 0 0;
				padding-left: 43px;
				border-top: 1px solid #e7e7eb;

				&__li {
					line-height: 50px;
					position: relative;
					text-align: center;

					a {
						border-left: 1px solid #e7e7eb;
						display: block;
						width: auto;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						word-wrap: normal;
						color: #616161;
						text-decoration: none;
						padding: 0 10px;
						font-size: 13px;

						&:hover {
							background-color: #eeeeee;
							color: #000000;
						}

						&.active {
							border: 1px solid #44b549;
							color: #44b549;
							line-height: 48px;
						}
					}

					&__1 {
						width: 50%;
						float: left;
					}

					&__2,
					&__3 {
						width: 33.3333333%;
						float: left;
					}

					&__pre_add {
						border: 1px solid #44b549 !important;
						color: #44b549;
						line-height: 48px;
					}

					&__add {
						width: auto;
						float: none;
						overflow: hidden;
					}

					&__submenu {
						bottom: 60px;
						background-color: #fafafa;
						position: absolute;
						left: 0;
						width: 100%;
						border: 1px solid #d0d0d0;
						border-top: 0;
						display: none;

						&__arrow {
							position: absolute;
							left: 50%;
							margin-left: -6px;
						}

						&__arrow_out {
							bottom: -6px;
							display: inline-block;
							width: 0;
							height: 0;
							border-width: 6px;
							border-style: dashed;
							border-color: transparent;
							border-bottom-width: 0;
							border-top-color: #d0d0d0;
							border-top-style: solid;
						}

						&__arrow_in {
							bottom: -5px;
							display: inline-block;
							width: 0;
							height: 0;
							border-width: 6px;
							border-style: dashed;
							border-color: transparent;
							border-bottom-width: 0;
							border-top-color: #fafafa;
							border-top-style: solid;
						}

						&__ul {
							&__li {
								a {
									border-left: 0;
									font-size: 12px;

									span {
										display: block;
										border-top: 1px solid #e7e7eb;
										width: auto;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
										word-wrap: normal;
										cursor: pointer;
									}
								}

								&:first-child {
									border-top: 1px solid #d0d0d0;

									a {
										span {
											border-top: 0;
										}
									}
								}

								&.current {
									background-color: $color-white;
									border: 1px solid #44b549;
									position: relative;
									z-index: 1;
									line-height: 45px;
								}
							}
						}
					}
				}
			}
		}
	}

	// 编辑区域
	&-menu__edit {
		background-color: #f4f5f9;
		padding-left: 15px;
		padding-right: 15px;
		border: 1px solid #e7e7eb;
		min-height: 465px;
		position: relative;
		padding-bottom: 15px;
		margin-left: 318px;

		&__area {
			&__title {
				height: 40px;
				line-height: 40px;
				border-bottom: 1px solid #e7e7eb;

				&__area {
					float: right;
					color: #576b95;
					font-size: 14px;
					cursor: pointer;
				}

				span {
					font-size: 14px;
					color: #000;
				}
			}

			&__url,
			&__weapp {
				padding: 16px 20px;
				border: 1px solid #e7e7eb;
				background-color: $color-white;

				&__area {
					&__tips {
						padding-bottom: 10px;
						color: #9a9a9a;
					}
				}
			}
		}

		.triangle {
			display: block;
			position: absolute;
			left: -14px;
			bottom: 14px;
			width: 0;
			height: 0;
			border-right: 14px solid #e7e7eb;
			border-top: 14px solid transparent;
			border-bottom: 14px solid transparent;

			&:before {
				content: " ";
				position: absolute;
				left: 2px;
				top: -12px;
				display: block;
				width: 0;
				height: 0;
				border-right: 12px solid #f4f5f9;
				border-top: 12px solid transparent;
				border-bottom: 12px solid transparent;
			}
		}

		&__tips {
			display: flex;
			justify-items: center;
			align-items: center;
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			text-align: center;

			&__box {
				width: 100%;
			}
		}

		// 已选择图文样式
		&__picmsg__area {
			color: #9a9a9a;
			overflow: hidden;

			&__list {
				width: 306px;
				display: inline-block;
				border: 1px solid #e7e7eb;
				background-color: $color-white;

				&__item {
					position: relative;
					padding: 15px;

					.bd,
					.hd {
						display: table-cell;
						vertical-align: middle;
						word-wrap: break-word;
						word-break: break-all;
					}

					.bd {
						width: 2000px;
						color: #353535;
					}

					.hd {
						.thumb {
							width: 48px;
							height: 48px;
							display: block;
							position: relative;

							.el-image {
								height: 100% !important;
							}
						}
					}

					&.has-thumb {
						padding-top: 56.25%;

						.bd {
							.title {
								position: absolute;
								left: 15px;
								right: 15px;
								bottom: 15px;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
								color: $color-white;
								font-weight: 400;
								z-index: 1;
							}
						}

						.hd {
							.thumb {
								position: absolute;
								top: 0;
								bottom: 0;
								left: 0;
								right: 0;
								width: auto;
								height: auto;
								background-size: cover;
								background-position: 50% 50%;
								background-repeat: no-repeat;
								background-color: #f6f8f9;
							}
						}
					}
				}
			}

			&__delete {
				display: inline-block;
				vertical-align: bottom;
				padding-left: 10px;
				margin-bottom: 5px;
				color: #576b95;
			}
		}

		// 图片样式
		&__pic {
			width: 320px;
			position: relative;

			&__delete {
				svg {
					fill: $color-white;
					margin-right: 10px;
					vertical-align: middle;
					margin-top: -2px;
				}

				position: absolute;
				top: 20px;
				right: 20px;
				background-color: rgba(0, 0, 0, 0.5);
				border: 0;
				padding: 6px 12px;
				border-radius: 4px;
				color: $color-white;

				&:hover {
					background-color: rgba(47, 47, 47, 0.5);
				}
			}
		}
	}

	&__toolbar {
		margin: 40px auto;
		text-align: center;
	}
}

.show {
	display: block;
}

.el-tabs {
	box-shadow: none;
}

.el-row {
	display: flex;
	justify-content: center;
	align-items: center;

	&:last-child {
		margin-bottom: 0;
	}

	.el-tabs__content {
		min-height: 300px;
	}
}
</style>
